<!--
 * @Descripttion: 机构部门管理人员组件
--> 

<template>
  <div>
    <div class="plicemain">
      <div class="pliceAdd" v-for="(item, index) in arr" :key="index">
        <ul class="placemsg">
          <li>
            <span class="placena">职位</span>
            ：
            <el-input class="placeInp" v-model="item.position" autocomplete="off" clearable></el-input>
          </li>
          <li>
            <span class="placena">姓名</span>
            ：
            <el-input class="placeInp" v-model="item.name" autocomplete="off" clearable></el-input>
          </li>
          <li>
            <span class="placena">电话</span>
            ：
            <el-input class="placeIP" v-model="item.phone" autocomplete="off" clearable></el-input>
          </li>
          <li>
            <span class="placena">序号</span>
            ：
            <el-input class="placeIP" v-model="item.id" type="number" autocomplete="off" clearable></el-input>
          </li>
          <li>
            <span class="placena">头像</span>
            ：
            <div @click="currentId = index">
              <el-upload class="avatar-uploader" action="#" :show-file-list="false" :beforeUpload="beforeRead">
                <img v-if="item.photo" :src="global.baseUrlImage + 'avatar/' + item.photo" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </li>

          <li>
            <el-button @click="addplice(index)" icon="el-icon-plus" circle></el-button>
            <el-button @click="delplice(index)" icon="el-icon-minus" circle></el-button>
          </li>
        </ul>
      </div>
      <div class="btnplice">
        <div v-if="arr && arr.length == 0">
          <el-button @click="addplice(-1)" icon="el-icon-plus" circle></el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import fileUtils from "@/utils/fileUtils.js";
import { getBase64 } from "@/common/utils";
export default {
  name: "GuanliPeople",
  props: {
    people: {
      type: Array,
      default: function () {
        return [];
      }
    }
  },

  data() {
    return {
      arr: this.people
    };
  },
  watch: {
    people(val) {
      this.arr = val;
    }
  },
  methods: {
    updatePeople() {
      this.$emit("update:people", this.arr);
    },
    // 增加人员：
    addplice(index) {
      let newObj = {
        peopel: "",
        name: "",
        position: "",
        type: "",
        img: "",
        id: 1
      };
      this.arr.splice(index + 1, 0, newObj);
      this.updatePeople();
    },
    // 删除人员
    delplice(index) {
      this.arr.splice(index, 1);
      this.updatePeople();
    },
    beforeRead(file) {
      let that = this;
      return new Promise((resolve) => {
        fileUtils.getOrientation(file).then((orient) => {
          let reader = new FileReader();
          let img = new Image();
          reader.onload = (e) => {
            img.src = e.target.result;
            img.onload = async function () {
              let width = 600,
                height = 600 * (img.height / img.width);
              const data = await fileUtils.rotateImage(img, width, height, orient);
              const newFile = await fileUtils.dataURLtoFile(data, file.name);
              resolve(that.upLoad(newFile));
            };
          };
          reader.readAsDataURL(file);
        });
      });
    },
    // 编辑添加图片
    async upLoad(param) {
      var imgup = "";
      await getBase64(param).then((res) => {
        imgup = res;
      });
      var paramd = {
        img: imgup
      };
      this.$api.imgAdd.addimgPer(paramd).then((res) => {
        let rs = this.arr[this.currentId];
        rs.photo = res.id;
        this.$set(this.arr, this.currentId, rs);
        this.updatePeople();
      });
    }
  },
  mounted() {}
};
</script>
<style scoped>
.el-upload.el-upload--text {
  width: 148px;
  height: 148px;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>